<template>
  <div class="mobile-scheme-scene">
    <Title
      v-slide-up
      title="应用场景"
      color="#0e0b31"
      size="16"
      bold="700"
      sub-title="Application scenario"
      sub-color="#878597"
      sub-size="14"
      left="27"
      block="#4580dd"
      block-width="2"
      block-pos="center"
    />
    <div class="g-box">
      <div v-slide-plus v-for="(i, k) in data.list" :key="k" class="g-item f">
        <img v-slide-plus :src="publicSrc(i.image)" />
        <div class="p16">
          <Title
            v-slide-up
            :title="i.name"
            color="#0e0b31"
            size="14"
            bold="700"
            line="1"
            :sub-title="i.introduce"
            sub-color="#383838"
            sub-size="14"
            gap="6"
            :line-height="19.6"
            sub-line="2"
            left="0"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { publicSrc } from "@/utils/common";
defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        list: [],
      };
    },
  },
});
</script>
<style lang="scss" scoped>
.mobile-scheme-scene {
  width: 100%;
  background-color: #fff;
  padding: 1.25rem;
  box-sizing: border-box;
  .g-box {
    margin-top: 1.25rem;
    .g-item {
      background: #fff;
      border: 1px solid #e5e5e5;
      transition: all 0.3s;
      margin-bottom: 1.25rem;
      &:last-child {
        margin-bottom: 0;
      }
      img {
        width: 8.125rem;
        height: 6.25rem;
        object-fit: cover;
      }
      &:active {
        background: linear-gradient(135deg, #fff 0%, #2a82e4 100%);
        // box-shadow: 0 0.625rem 0.9375rem rgba(42, 130, 228, 0.25);
        // animation: toRight 0.3s ease;
      }
    }
  }
}
</style>
